import 'package:desktop_multi_window/desktop_multi_window.dart';
import 'package:fluent_ui/fluent_ui.dart';

class HomePage extends StatefulWidget {
  //final ValueNotifier<bool> onScreenShot;
  //final ValueNotifier<bool> onClipboard;

  HomePage({super.key}); 


  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  late int topIndex;
  late PaneDisplayMode displayMode;

  @override
  void initState() {
    super.initState();
    
    topIndex = 0;
    displayMode = PaneDisplayMode.compact;
  }

  @override
  Widget build(BuildContext context) {
    List<NavigationPaneItem> items = [
      PaneItem(
        icon: const Icon(FluentIcons.home),
        title: const Text('Home'),
        body: SizedBox(
          height: 200.0,
          child: TextBox(
            maxLines: null,
          ),
        ),
      ),
      PaneItemSeparator(),
      PaneItem(
        icon: const Icon(FluentIcons.issue_tracking),
        title: const Text('Track orders'),
        infoBadge: const InfoBadge(source: Text('8')),
        body: const Text('Track orders'),
      ),
      PaneItem(
        icon: const Icon(FluentIcons.issue_tracking),
        title: const Text('Track orders'),
        infoBadge: const InfoBadge(source: Text('8')),
        body: const Text('Track orders2'),
      ),
      PaneItem(
        icon: const Icon(FluentIcons.disable_updates),
        title: const Text('Disabled Item'),
        body: const Text('Disabled Item'),
        enabled: false,
      ),
      PaneItemExpander(
        icon: const Icon(FluentIcons.account_management),
        title: const Text('Account'),
        body: const Text('Account'),
        items: [
          PaneItemHeader(header: const Text('Apps')),
          PaneItem(
            icon: const Icon(FluentIcons.mail),
            title: const Text('Mail'),
            body: const Text('Mail'),
          ),
          PaneItem(
            icon: const Icon(FluentIcons.calendar),
            title: const Text('Calendar'),
            body: const Text('Calendar'),
          ),
        ],
      ),
      PaneItemWidgetAdapter(
        child: Builder(builder: (context) {
          // Build the widget depending on the current display mode.
          //
          // This already returns the resolved auto display mode.
          if (NavigationView.of(context).displayMode == PaneDisplayMode.compact) {
            return const FlutterLogo();
          }
          return ConstrainedBox(
            // Constraints are required for top display mode, otherwise the Row will
            // expand to the available space.
            constraints: const BoxConstraints(maxWidth: 200.0),
            child: const Row(children: [
              FlutterLogo(),
              SizedBox(width: 6.0),
              Text('This is a custom widget'),
            ]),
          );
        }),
      ),
    ];




    return FluentTheme(
      data: FluentThemeData(),
      child: NavigationView(
        //页面返回
        // appBar: const NavigationAppBar(
        //   title: Text('NavigationView'),
        // ),
        pane: NavigationPane(
          selected: topIndex,
          onItemPressed: (index) {
            // Do anything you want to do, such as:

            print("选择1： $index");
            print("--- $displayMode");
            print("--- $topIndex");
            if (topIndex == index) {
              setState(() {
                if (displayMode == PaneDisplayMode.open) {
                  displayMode = PaneDisplayMode.compact;
                } else if (displayMode == PaneDisplayMode.compact) {
                  displayMode = PaneDisplayMode.open;
                }
              });
            }
          },
          onChanged: (index) => setState(() {
            print("选择2： $index");
            topIndex = index;
          }),
          displayMode: displayMode,
          items: items,
          footerItems: [

          ],
        ),
      ),
    );
  }
  

}